<template>
  <div id="myTask">
    <!--错题报告-->
    <el-row :gutter="40">
      <el-col :span="6"><div class="grid-content bg-purple" :class="indexTi == 0?'bg-green':''" @click="changeTi(0)">单选题 <span>{{totalId1}}</span> </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" :class="indexTi == 1?'bg-green':''" @click="changeTi(1)">多选题 <span>{{totalId2}}</span> </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" :class="indexTi == 2?'bg-green':''" @click="changeTi(2)">判断题 <span>{{totalId3}}</span> </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" :class="indexTi == 3?'bg-green':''" @click="changeTi(3)">简答题 <span>{{totalId4}}</span> </div></el-col>
    </el-row>
    <el-col :span="18" :xs="24" style="width: 1200px;">
      <el-card class="qu-content">
        <!--单选题-->
        <div class="singleChoice">
          <ul>
            <li v-for="(item,index) in list">
              <p class="singleChoice-li-tit">{{index+1}}、{{item.examQuestion.questionTitle}}</p>
              <div class="singleChoice-li-c" v-if="indexTi == 0 || indexTi == 2">
                <div
                  :class="item.examQuestion.questionAnswer!=item1.code?'singleChoice-li-qita':'singleChoice-li-daan'"
                  v-for="(item1,index1) in item.questionOptions"
                  :key="index1">
                  {{ item1.code }}.{{ item1.content }}
                  <img v-if="item.examQuestion.questionAnswer==item1.code" src="@/assets/images/examination/hook.png" alt="">
                </div>
              </div>
              <div class="singleChoice-li-c" v-if="indexTi == 1">
                <div
                  :class="item.examQuestion.answerList.indexOf(item2.code)==-1?'singleChoice-li-qita':'singleChoice-li-daan'"
                  v-for="(item2,index2) in item.questionOptions"
                  :key="index2">
                  {{ item2.code }}.{{ item2.content }}
                  <img v-if="item.examQuestion.answerList.indexOf(item2.code)!=-1" src="@/assets/images/examination/hook.png" alt="">
                </div>
              </div>
              <div class="singleChoice-li-b">
                <div v-if="indexTi != 3">正确答案：{{item.examQuestion.questionAnswer}}</div>
                <div v-else>正确答案：{{item.examQuestion.questionAnswerReply}}</div>
                <div>
                  解析：{{item.examQuestion.analysis}}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-card>
    </el-col>
  </div>
</template>

<script>
  import {examRecordselect,selectErrorQuestionList} from '@/request/api'
  export default {
    name: 'myTask',
    data () {
      return {
        indexTi: 0,
        list: [],
      totalId1:0,
      totalId2:0,
      totalId3:0,
      totalId4:0,
      }
    },
    mounted() {
      this.getList1()
      this.getList2()
    },
    methods: {
      getList1() {
        const loading = this.openLoading();
        var params = {
          userId: JSON.parse(localStorage.getItem('userInfo')).id,
        }
        selectErrorQuestionList(params).then(res=> {
          if(res.code == 200) {
            this.totalId1 = res.data[0].totalId
            this.totalId2 = res.data[1].totalId
            this.totalId3 = res.data[2].totalId
            this.totalId4 = res.data[3].totalId
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      getList2() {
        const loading = this.openLoading();
        var params = {
          "_search": true,
          "bgTm": "",
          "createBy": 0,
          "data": {"questionType":this.indexTi},
          "endTm": "",
          "keywords": "",
          "pageNumber": 1,
          "pageSize": 20,
          "selected": "",
          "selectedType": "member_id",
          "sortField": "",
          "sortOrder": "",
          "status": 0,
          "type": JSON.parse(localStorage.getItem('userInfo')).id,
        }
        examRecordselect(params).then(res=> {
          if(res.code == 200) {
            if(res.data.records.length!=0) {
              this.list = res.data.records
              if(this.indexTi==1) {
                this.list.forEach(item=> {
                  item.examQuestion.answerList = item.examQuestion.questionAnswer.split(',')
                })
              }
            }else {
              this.$message({
                message: '暂无记录',
                type: 'warning',
                offset: '500'
              });
            }
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      changeTi(index) {
          this.indexTi = index;
        this.getList2()
      }
    }
  }
</script>

<style scoped>
  #myTask {
    box-sizing: border-box;
    width: 1200px;
    margin-bottom:60px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .grid-content {
    height: 80px;
    line-height: 80px;
    background: #fff;
    box-shadow: 0px 0px 12px 0px rgba(55, 78, 64, 0.2);
    border-radius: 4px;
    padding: 0 30px;
    font-size: 20px;
    cursor: pointer;
  }
  .grid-content span {
    font-size: 28px;
    font-weight: bold;
    float: right;
  }
  .bg-green {
    background: #22944E;
    color: #FFFFFF;
  }
  .qu-content{

  }
  .qu-content div{
    line-height: 30px;
  }
  .el-checkbox-group label,.el-radio-group label{
    width: 100%;
  }
  .card-title{
    background: rgba(34, 148, 78, 0.2);
    color: #22944E;
    height: 40px;
    line-height: 40px;
    /*text-align: center;*/
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
  }
  .card-line{
    /*padding-left: 10px*/
  }
  .card-line span {
    cursor: pointer;
    margin: 2px;
  }
  /deep/
  .el-radio, .el-checkbox{
    padding: 9px 20px 9px 10px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    margin-bottom: 10px;
  }
  .is-checked{
    background: #E8F4ED;
    border: 1px solid #22944E;
  }
  .is-checked .el-radio__label {
    color: #22944E;
  }
  .el-radio img, .el-checkbox img{
    max-width: 200px;
    max-height: 200px;
    border: #dcdfe6 1px dotted;
  }
  /deep/
  .el-checkbox__inner {
    display: none;
  }
  /deep/
  .el-radio__inner{
    display: none;
  }
  /deep/
  .el-checkbox__label{
    line-height: 30px;
  }
  /deep/
  .el-radio__label {
    line-height: 30px;
    font-size: 16px;
  }
  .datika /deep/ .el-card__body {
    padding: 0
  }
  /deep/ .el-tag {
           width: 40px;
           height: 40px;
           text-align: center;
           line-height: 40px;
           font-size: 18px;
         }


  .singleChoice {

  }
  .singleChoice .singleChoice-tit {
    height: 40px;
    line-height: 40px;
    width: 100%;
    padding-left: 20px;
    border-bottom: 1px solid #E5E5E5;
    font-size: 18px;
    box-sizing: border-box;
  }
  .singleChoice .singleChoice-tit span {
    font-size: 14px;
    color: #9A9A9A;
  }
  .qu-content /deep/ .el-card__body {
    padding: 0
  }
  .singleChoice ul {
    padding: 0;
    margin: 0;
  }
  .singleChoice ul li {
    list-style-type:none;
    border-bottom: 1px solid #E5E5E5;
    padding: 20px 20px 30px;
    font-size: 16px;
  }
  .singleChoice-li-xuanze, .singleChoice-li-qita, .singleChoice-li-daan {
    width: 480px;
    height: 40px;
    line-height: 40px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding-left: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
  }
  .singleChoice-li-xuanze {
    background: #FFE5E5;
    border: 1px solid #FF0000;
    color: #FF0000;
  }
  .singleChoice-li-daan {
    background: #E8F4ED;
    border: 1px solid #22944E;
    color: #22944E;
  }
  .singleChoice-li-xuanze img, .singleChoice-li-daan img{
    float: right;
    margin: 9px 20px;
  }
  .singleChoice-li-b {
    color: #FF0001;
    line-height: 24px;
  }
</style>
